<template>
	<view class="my-info">
				<u-image src="/static/web_logo.png" height="150" width="150" class="logo"></u-image>
		
		<!-- 头像 -->
		<u-image :src="data.headSrc" width="400rpx" height="400rpx" mode="aspectFit" shape="circle"
			class="head u-skeleton-circle">
		</u-image>
		<view style="font-size: 48rpx;font-weight: bold;color: #686868;">Svanur</view>
	
		<!-- 按钮组 -->
		<u-row class="buttons">
			<u-col span="6" class="col" v-for="(item,index) in buttons" :key="index">
				<u-button @click="gogogo(index)" :ripple="true" shape="circle" class="button u-skeleton-fillet"
					:hair-line="false" :type="item.style">
					{{item.title}}
				</u-button>
			</u-col>
		</u-row>
		
		<!-- 播放器 -->
		<music-player v-if="!data.loading" :nowMusic="data.musicList[data.nowPlayer]" :length="data.musicList.length"
			:nowIndex="data.nowPlayer" class="music-player" @openList="music" @changeIndex="changeIndex"></music-player>
			
	</view>
</template>

<script>
	export default {
		props:{
			data:{
				type:Object
			}
		},
		name:"my-info",
		data() {
			return {
				buttons: [{
						title: "Gitee",
						style: "error",
						url: "https://gitee.com/daijiapeng"
					},
					{
						title: "网易音乐人",
						style: "error",
						url: "https://music.163.com/#/artist?id=12258663"
					},
					{
						title: "作者QQ",
						style: "primary",
						url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a3f905ee-2869-45eb-968d-c49f9a9d1467/0d787a8b-1b4c-4b17-9993-3a58452e750d.png"
					},
					{
						title: "作者粉丝群",
						style: "primary",
						url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a3f905ee-2869-45eb-968d-c49f9a9d1467/12515fa1-f60a-49e2-b544-533777b8335c.jpg"
					}
				]
			};
		},
		methods:{
			music(){
				this.$emit("openList")
			},
			changeIndex(index){
				this.$emit("changeIndex",index)
			},
			gogogo(index){
				this.$emit("gogogo",this.buttons[index].url)
			}
		}
	}
</script>

<style lang="scss">
	.my-info {
		height: 1180rpx;
		background-color: #fff;
		width: 768rpx;
		box-shadow: 0rpx 5rpx 20rpx $u-bg-color;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		position: relative;
		
		.logo{
			position: absolute;
			top: 20rpx;
			left: 20rpx;
		}
		
		.head {
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			box-shadow: 10rpx 15rpx 20rpx $u-bg-color;
			object-fit: cover;
			flex-shrink:0;
		}
	
		.buttons {
			margin-top: 40rpx;
			width: 100%;
	
			.button {
				//width: 50%;
				display: flex;
				flex-direction: row;
				margin-top: 20rpx;
			}
		}
	
		.music-player {
			margin-top: 40rpx;
			width: 100%;
			height: 25%;
		}
	
	
	}
</style>
